<template>
    <!-- 修改资料 -->

    <div>
                <!-- 内容主题区域 -->
                <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules"
                    class="borderNone" disabled>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="账号" prop="number">
                                <el-input v-model="form.number"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="用户类型" prop="userLevelName">
                                <el-input v-model="form.userLevelName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="菜单角色" prop="roleNames">
                                <el-input v-model="form.roleNames"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="数据权限" prop="dataPermissionName">
                                <el-input v-model="form.dataPermissionNames"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                            <el-form-item label="人员姓名">
                                <el-input v-model="form.employeeName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                            <el-form-item label="人员部门">
                                <el-input v-model="form.deptName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                            <el-form-item label="状态" prop="status">
                                <el-switch v-model="form.status" size="large" inline-prompt :active-icon="Check"
                                    :inactive-icon="Close" active-value="normal" inactive-value="disable" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="上传照片">
                            <el-icon v-if="imageUrl == ''"
                                style="width: 200px;height: 150px;background-color: #f5f7fa;"><icon-picture /></el-icon>
                            <div v-else class="image-container">
                                <img :src="imageUrl" style="width: 100%;height: 100%;" />
                                <div class="overlay">
                                    <el-icon style="
                                     position: absolute;
                                     z-index: 1;
                                     left: 50%;
                                     top: 50%;
                                     transform: translate(-50%, -50%);
                                     " :size="30" @click="preview">
                                        <Search />
                                    </el-icon>
                                </div>
                            </div>
                        </el-form-item>
                        <el-dialog v-model="dialogVisible">
                            <img :src="imageUrl" alt="Preview Image" w-full style="width: 100%" />
                        </el-dialog>
                    </el-row>
                </el-form>
                <!-- 底部按钮区域 -->
                <div class="button-position">
                    <el-button @click="updateVisible">退 出</el-button>
                </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { FullScreen, CopyDocument } from '@element-plus/icons-vue'
import { Search} from "@element-plus/icons-vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import Api from '@/api/model/system'
const emit = defineEmits(['updatetable'])
const form = ref({});
const formRef = ref()
const formRules = reactive({
})
const imageUrl = ref();
const dialogVisible = ref(false);
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
onMounted(() => {
    getInit()
})


const getInit = async () => {
    let res = await Api.user.detail.post(props.paramsData);
    console.log(res)
    if (res.code == 200) {
        form.value = res.data
        imageUrl.value = res.data.fileFullPath;
    }
}
const preview = () => {
  dialogVisible.value = true;
};
const updateVisible = () => {
    emit('updatetable')
}


</script>

<style lang="less" scoped>
.el-card {
    margin-bottom: 20px;
}

.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}

.image-container {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 150px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}

.overlay:hover {
    opacity: 1;
}
</style>

